frontend/src/components/Pages/verifyRegisterOtp.jsx (2)

Line range hint 28-47: Enhance input validation for better security.

While basic validation is implemented, consider strengthening it:

-if (!email || !/\S+@\S+\.\S+/.test(email)) {
+const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+if (!email || !EMAIL_REGEX.test(email)) {
   setError('Please enter a valid email address');
   setIsLoading(false);
   return;
 }

-if (otp.length !== 6) {
+if (otp.length !== 6 || !/^\d{6}$/.test(otp)) {
   setError('Please enter a valid 6-digit OTP');
   setIsLoading(false);
   return;
 }

---

Line range hint 89-117: Enhance accessibility for error messages and loading states.

The current implementation has good accessibility features, but could be improved:

 {error && (
-  <div className="w-full p-2 bg-red-100 text-red-700 border border-red-400 rounded-md">
+  <div 
+    role="alert"
+    aria-live="polite"
+    className="w-full p-2 bg-red-100 text-red-700 border border-red-400 rounded-md">
     {error}
   </div>
 )}

 <button
   type="submit"
-  className="button-confirm mx-auto mt-12 px-4 w-30 h-10 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] cursor-pointer active:shadow-none active:translate-x-[3px] active:translate-y-[3px]"
+  className={`button-confirm mx-auto mt-12 px-4 w-30 h-10 rounded-md border-2 border-black ${
+    isLoading ? 'bg-gray-200' : 'bg-beige'
+  } shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] cursor-pointer active:shadow-none active:translate-x-[3px] active:translate-y-[3px] disabled:opacity-50 disabled:cursor-not-allowed`}
   disabled={isLoading}
+  aria-busy={isLoading}
 >
   {isLoading ? 'Submitting...' : 'Verify OTP →'}
 </button>

frontend/src/components/Pages/Login.jsx (3)

Line range hint 15-15: Review security implications of Remember Me feature.

The implementation of Remember Me looks good, but consider these security aspects:

1. The 7-day token expiration for Remember Me could increase security risks
2. Consider adding refresh token mechanism for long-lived sessions
3. Cookie security attributes are properly set (secure, sameSite)

Consider implementing:

1. Refresh token rotation
2. Activity-based token refresh
3. Server-side session tracking

Also applies to: 33-40

---

70-70: Improve dark mode accessibility and consistency.

The dark mode implementation could benefit from these enhancements:

1. Consider using CSS variables for consistent shadow colors
2. Ensure sufficient contrast ratios for dark mode text
3. Standardize the shadow implementation

-  className="... dark:shadow-[4px_4px_0px_0px_grey] ..."
+  className="... dark:shadow-[4px_4px_0px_0px_var(--shadow-dark)] ..."

Add to your CSS:

:root {
  --shadow-dark: rgb(75, 75, 75);
}

Also applies to: 80-80, 89-89, 138-138, 148-148

---

Line range hint 95-104: Enhance password toggle button accessibility.

While the password toggle functionality works, consider these accessibility improvements:

 <button
   className="absolute top-1/2 transform -translate-y-1/2 right-4"
+  type="button"
+  aria-label={hidden ? "Show password" : "Hide password"}
   onClick={(e) => {
     e.preventDefault();
     setHidden(!hidden);
   }}
 >
   {hidden ? <FaEyeSlash /> : <FaEye />}
 </button>

frontend/src/components/Pages/Signup.jsx (3)

131-137: Enhance password toggle button accessibility.

While the toggle functionality works, consider these accessibility improvements:

 <button  
   className="absolute top-1/2 transform -translate-y-1/2 right-4"
+  type="button"
+  aria-label={hidden ? "Show password" : "Hide password"}
   onClick={(e) => { 
     e.preventDefault(); 
     setHidden(!hidden); 
   }}
 >

---

Line range hint 28-50: Strengthen email validation logic.

Consider using a more robust email validation pattern instead of the basic '@' check:

-    if (!data.email.includes('@')) {
+    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailPattern.test(data.email)) {
       setError('Please enter a valid email address');
       setIsLoading(false);
       return;
     }

---

101-101: Consider refining dark mode color scheme.

The current dark mode uses amber-800 which might be too intense. Consider a more neutral background color for better readability:

-  className="z-10 p-8 lg:p-16 bg-[#f1e9dc] dark:bg-amber-800 dark:text-white flex flex-col gap-6 rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] dark:shadow-[4px_4px_0px_0px_grey]"
+  className="z-10 p-8 lg:p-16 bg-[#f1e9dc] dark:bg-gray-800 dark:text-white flex flex-col gap-6 rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)]"

Also applies to: 110-110, 117-117, 125-125

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Check for other instances of this API endpoint to ensure consistent security measures
rg -g '!node_modules' -g '!dist' -A 3 '/api/user/verify'

#!/bin/bash
# Compare the size of original and optimized images
echo "Checking image sizes..."
original_size=$(find . -name "login.png" -exec ls -l {} \; | awk '{print $5}')
optimized_size=$(find . -name "login-opt.png" -exec ls -l {} \; | awk '{print $5}')

if [ ! -z "$original_size" ] && [ ! -z "$optimized_size" ]; then
    reduction=$(echo "scale=2; (($original_size - $optimized_size) / $original_size) * 100" | bc)
    echo "Size reduction: $reduction%"
fi

#!/bin/bash
# Compare sizes of original and optimized images
original_size=$(fd -t f "login.png" | xargs ls -l | awk '{print $5}')
optimized_size=$(fd -t f "login-opt.png" | xargs ls -l | awk '{print $5}')

if [ ! -z "$original_size" ] && [ ! -z "$optimized_size" ]; then
  reduction=$(echo "scale=2; (($original_size - $optimized_size) / $original_size) * 100" | bc)
  echo "Size reduction: $reduction%"
  if (( $(echo "$reduction < 60" | bc -l) )); then
    echo "Warning: Image size reduction is less than the target 60%"
  fi
fi

#!/bin/bash
# Compare sizes of original and optimized images
original_size=$(fd -t f "login.png" | xargs ls -l | awk '{print $5}')
optimized_size=$(fd -t f "login-opt.png" | xargs ls -l | awk '{print $5}')

if [ ! -z "$original_size" ] && [ ! -z "$optimized_size" ]; then
    echo "Original size: $original_size bytes"
    echo "Optimized size: $optimized_size bytes"
    # Manual calculation: (4273500 - 1291834) / 4273500 * 100 ≈ 69.77%
fi

README.md (1)

371-372: Fix markdown formatting: Replace hard tabs with spaces.

There are several instances of hard tabs in the markdown file. While they render correctly, it's best practice to use spaces for consistent formatting across different editors and platforms.

Also applies to: 440-441, 486-487, 539-540, 585-586

🧰 Tools

🪛 Markdownlint

371-371: Column: 1
Hard tabs

(MD010, no-hard-tabs)

---

372-372: Column: 1
Hard tabs

(MD010, no-hard-tabs)

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Search for files related to login page changes
echo "Searching for login-related files..."
fd -e jsx -e js -e ts -e tsx "login|Login" 

# Search for image-related changes
echo "Searching for image-related changes..."
fd -e png -e jpg -e jpeg -e webp

#!/bin/bash
# Check the content of Login.jsx
echo "Content of Login.jsx:"
cat frontend/src/components/Pages/Login.jsx

# Check git changes for Login.jsx
echo -e "\nGit changes for Login.jsx:"
git diff frontend/src/components/Pages/Login.jsx

#!/bin/bash
# Check git changes for the login-related images
echo "Git changes for login images:"
git diff frontend/src/assets/login.png frontend/src/assets/login-opt.png

# Get file sizes of the login images
echo -e "\nFile sizes of login images:"
ls -lh frontend/src/assets/login*.png